<template>
  <div class="login_container">
    <div class="login">
      <h3>梓晨电影院</h3>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" status-icon>
        <el-form-item prop="memberName">
          <el-input placeholder="请输入用户账号" prefix-icon="el-icon-user" v-model="loginForm.memberName" clearable></el-input>
        </el-form-item>
        <el-form-item prop="memberPassword">
          <el-input type="password" show-password placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="loginForm.memberPassword" clearable></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input placeholder="请输入验证码" prefix-icon="el-icon-s-ticket" style="width:170px;float:left;margin-right:10px" v-model="loginForm.code" clearable></el-input>
         <span @click="refreshCode"><SIdentify style="float:left" :identifyCode="identifyCode" ></SIdentify></span>
        </el-form-item>
      </el-form>
      <router-link to="/register" class="toRegister">还没有账号，去注册</router-link>     
      <el-button type="primary" @click="login">登录</el-button>
    </div>
  </div>
</template>

<script>
import SIdentify from '../components/identify'
export default {
  components:{
    'SIdentify':SIdentify
  },
   mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  data() {
    var validateCode = (rule, value, callback) => {
      console.log("code=  "+value.toUpperCase())
        // if (value.toUpperCase() != this.identifyCode.toUpperCase()) {
        //   callback(new Error('验证码不正确'));
        // } 
          callback();
        }
      
    return {
      identifyCode:'',
      identifyCodes:'1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
      loginForm:{
        memberName:'',
        memberPassword:'',
      },
      loginRules:{
        memberName:[
          {required:true,message:"请输入用户名",trigger:"blur" },
          {min:3,max:10,message:"长度在3-10个字符之间",trigger:"blur"}
          ],
        memberPassword:[
          {required:true,message:"请输入密码",trigger:"blur" },
        ],
        code:[
          {required:true,message:"请输入验证码",trigger:"blur" },
          {validator: validateCode, trigger: 'blur'}
        ],
      }
    };
  },
  methods:{
    login(){
      this.$refs.loginForm.validate(async valid=>{
        if(!valid){
          return
        }
        else{
          const {data:res} = await this.$http.post("/member/member/login",this.loginForm)
          if(res.code != 200){
            
            return this.$message.error("用户名或密码错误")
          }
          else{
            console.log(res.data)
                 this.$message.success("登录成功")
                 sessionStorage.setItem("memberId",res.data.memberId)
                 sessionStorage.setItem("memberName",res.data.nickName)
                 sessionStorage.setItem("avatar",res.data.memberAvatar)
                 sessionStorage.setItem("memberPhone",res.data.memberPhone)
                 localStorage.setItem("token",res.authorization)
                this.$router.push('/')
            }
           
           
          
        }
      })
    },
 
    jumpregister: function() {
      this.$router.push({ path: "/register" });
    },
    //验证码abcdefghijklnmopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    },




  }





};
</script>

<!-- scoped表示样式只在当前组件生效 -->
<style lang="less" scoped>
.login_container {
  height: 100%;
  background: url(../assets/image/back.jpg);
  background-size:cover;

  .login {

    position: fixed;
    background-color: white;
    right: 10%;
    top: 10%;
    padding: 2% 4%;

    h3 {
      text-align: center;
      letter-spacing: 5px;
      color: #2d9aef;
      font-size: 24px;
    }

  /deep/ .el-input__inner {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid;
    
  }

  .el-form-item{
    margin-top: 50px;
  }
  }


  .el-button {
    width: 100%;
    color: white;
    letter-spacing: 1em;
  }

  .role{
    margin-bottom: 10px;
    margin-top: 35px;
  }

  .toRegister{
    font-size: 15px;
    float: right;
    margin-top: -14px;
    margin-bottom: 10px;
  }
}
</style>
